<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            height: 200px;
            width: 360px;
            display: flex;
            margin-bottom: 20px;

        }

    </style>
</head>

<body>
    <img lazyload="true" data-origin="https://images.pexels.com/photos/2174974/pexels-photo-2174974.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        alt="">
    <img lazyload="true" data-origin="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjPbthgBHzwr3twaZdNIezgTVtW39DIta8yQ&s" alt="">
    <img lazyload="true" data-origin="https://cdn.pixabay.com/photo/2022/03/10/11/06/painting-7059647_1280.jpg" alt="">
    <img lazyload="true" data-origin="https://pic.616pic.com/phototwo/00/06/02/618e27a7290161785.jpg" alt="">
    <img lazyload="true" data-origin="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSczO6tRbL2TLj-fqKbc6z3FIkiwwLBmsywSg&s" alt="">
    <img lazyload="true" data-origin="https://imgs.699pic.com/images/501/593/433.jpg!list1x.v2" alt="">
    <img lazyload="true" data-origin="https://img.17sucai.com/upload/534358/2016-06-11/c7951590063a0d0ae39d1d1fd482849d.jpg?x-oss-process=style/lessen"
        alt="">
    <img lazyload="true" data-origin="https://pic.616pic.com/phototwo/00/07/67/619766a57f5df3279.jpg" alt="">
    <img lazyload="true" data-origin="https://png.pngtree.com/thumb_back/fh260/background/20210907/pngtree-landscape-summer-rice-field-outdoor-growth-photography-map-with-pictures-image_818304.jpg"
        alt="">
    <img lazyload="true" data-origin="https://images.pexels.com/photos/1108701/pexels-photo-1108701.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        alt="">
    <img lazyload="true" data-origin="https://img.17sucai.com/upload/534358/2016-06-12/49507020adf9923c6dd1f669913954d0.jpg?x-oss-process=style/lessen"
        alt="">
    <img lazyload="true" data-origin="https://pic.netbian.com/uploads/allimg/250630/191724-17512822443139.jpg" alt="">
    <img lazyload="true" data-origin="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRy19lOJhEqSo24n8XjcU-n_wz3UrrYDTvKFQ&s" alt=""> 
    <img lazyload="true" data-origin="https://pic.616pic.com/phototwo/00/07/01/619760f44c4863412.jpg" alt="">
    <img lazyload="true" data-origin="https://img.17sucai.com/upload/534358/2016-06-12/5717f32fe8ed1497863c6968d88a65b0.jpg?x-oss-process=style/lessen"
        alt="">
    <img lazyload="true" data-origin="https://images.pexels.com/photos/15829427/pexels-photo-15829427.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"

        alt="">

    <script>
        //获取屏幕高度
        const viewHeight = window.innerHeight;

        function lazyload() {
            const imgs = document.querySelectorAll('img[data-origin][lazyload]');
            imgs.forEach(item => {
                const rect = item.getBoundingClientRect();  //获取几何属性
                if (rect.top < viewHeight && rect.bottom > 0) {
                    const url = item.dataset.origin;
                    item.src = url;
                    item.removeAttribute('lazyload');
                    
                }
            })
        }
        
        lazyload();
        
        //监听滚动事件
        window.addEventListener('scroll', lazyload);
    </script>

</body>

</html>